<script setup>
/**
 * & 文件引入区域
 */
import {
  defineComponent,
  onBeforeMount,
  onUnmounted,
  ref,
  nextTick,
  onMounted,
} from "vue";
import { useRoute } from "vue-router";
import { showLoadingToast } from "vant";

import { useUseStore } from "@/stores/user";
import { useIndexStore } from "@/stores/indexStore";

import { secondCateList, commodityOfCateList } from "@/server/api/itemApi";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/**
 * & 注册区
 */

/**
 * & 变量声明区
 */
const route = useRoute();
let isScreen = ref(false); // 筛选功能区、左侧标签区、seeAll按钮的显示隐藏
let touchStartNum; // 用户点击时候获取坐标
let touchEndNum; // 用户点击时候获取坐标
let categoryList = ref(); // 二级分类标签数据
let firstIndex = ref();
// 商品数据请求体
let commodityDataReq = {
  limit: 10,
  page: 1,
  categoryId: "",
  countryCode: [useUseStore().countryCode]
};
let commodityData = ref(); // 商品数据
let baseUrl = useUseStore().ing; // 商品数据图片基础路径

// 控制分页加载
let loading = ref(false);
let finished = ref(false);

/**
 * & 函数区
 */
const seeAllFun = () => {
  isScreen.value = true;

  // commodityData.value.list = [];
  // showLoadingToast({
  //   message: "加载中...",
  //   forbidClick: true,
  //   onClose: () => {
  //     commodityOfCateListFun();
  //   },
  // });
};

// 获取二级分类标签
const secondCateListFun = async (id) => {

  let res = await secondCateList(id);
  console.log(res, "网店二级分类")
  categoryList.value = res.data.data;

  // 请求首个分类id的商品数据
  firstIndex.value = categoryList.value[0].categoryId;
  commodityOfCateListFun();
};

// 获取二级分类标签下的商品数据
const commodityOfCateListFun = async (isreNew) => {
  commodityDataReq.categoryId = firstIndex.value;

  let { data } = await commodityOfCateList(commodityDataReq);

  console.log(data, "网店二级商品数据")
  // data.data.list.forEach(
  //   (item) =>
  //   (item.avatarImag = item.avatarImag.includes("http")
  //     ? item.avatarImag
  //     : baseUrl + item.avatarImag)
  // );
  console.log("商品数据图片基础路径", baseUrl);
  console.log("商品数据", data.data);

  if (commodityDataReq.page <= 1 || isreNew) {
    commodityData.value = data.data;
  } else {
    commodityData.value.list.push(...data.data.list);
  }
  console.log("二级分类标签下的商品数据", commodityData.value);
};

// 点击二级列表标签切换数据
const tagClickFun = (id) => {
  // 更换分类id
  firstIndex.value = id;
  // 重回第一页
  commodityDataReq.page = 1;
  // 重置结束加载
  finished.value = false;
  commodityOfCateListFun(true);
};

// 更新分页方法
const addShopListPage = (id) => {
  // 首次更新
  if (id) {
    commodityOfCateListFun(id);
    return;
  }

  // 判断总数
  let { page, limit } = commodityDataReq;
  let ReqCount = page * limit;

  if (commodityData.value && ReqCount <= commodityData.value.count) {
    commodityDataReq.page += 1;
    commodityOfCateListFun();
    // 加载状态结束
  } else {
    // 数据全部加载完成
    finished.value = true;
  }

  loading.value = false;
};

// 判断用户是否左滑，显示标签区、seeAll按钮
window.addEventListener("touchstart", (e) => {
  touchStartNum = e.touches[0].clientX;
});
window.addEventListener("touchmove", (e) => {
  touchEndNum = e.touches[0].clientX;

  if (touchEndNum - touchStartNum > 80) {
    isScreen.value = false;
  }
});

// 组件挂载前
onBeforeMount(() => {
  // 调用数据接口
  secondCateListFun(route.query.categoryId);
});

onMounted(() => {
  loading.value = false;
});
</script>

<template>
  <div class="categoryPage">
    <div :class="['topSearch', useIndexStore().isRtl ? 'is_rtl' : '']">
      <img alt="" class="backBtn" @click="$router.back()" src="/images/Home/箭头left.png" />

      <div class="searchBox">
        <img alt="" src="/images/Home/搜索.png" :class="['searchLogo', useIndexStore().isRtl ? 'is_rtl' : '']" />

        <input type="text" class="search" :placeholder="$t('input.placeholder')" />
      </div>
    </div>

    <div class="content" v-if="categoryList">
      <div :class="['tagList', isScreen ? 'close' : '']">
        <div v-for="item in categoryList" @click="tagClickFun(item.categoryId)"
          :class="['item', item.categoryId == firstIndex ? 'con' : '']" :key="item.categoryId">
          <!-- {{ item.content }} -->
          {{ $t(`onlineShop.${item.content}`) }}
        </div>
      </div>

      <div class="products_list">
        <van-list :finished-text="$t('shop.shopList.finish')" v-model:loading="loading" @load="addShopListPage"
          :finished="finished" :offset="10">
          <ProductsList :isScreen="isScreen" :topNum="0" :data="commodityData" />
        </van-list>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.categoryPage {
  .topSearch {
    padding: 20rem 0;
    display: flex;
    align-items: center;
    background: #fff;

    &.is_rtl {
      flex-direction: row-reverse;
    }

    .backBtn {
      margin-left: 25rem;
      margin-right: 34rem;
      width: 6rem;
      height: 9rem;
    }

    .searchBox {
      height: 32rem;
      display: flex;
      align-items: center;
      position: relative;

      flex: 1;
      margin-right: 74rem;

      >.searchLogo {
        position: absolute;
        left: 12rem;

        &.is_rtl {
          left: unset;
          right: 12rem;
        }
      }

      >input {
        width: 100%;
        height: 100%;
        border-radius: 16rem;
        background: #f5f5f5;

        text-indent: 32rem;

        font-size: 12rem;
        line-height: 14rem;
      }
    }
  }

  .content {
    display: flex;
    height: calc(100vh - 72rem);
    max-height: calc(100vh - 72rem);

    .tagList {
      flex-shrink: 0;
      width: 88rem;
      height: 100%;
      background: #f5f5f5;

      overflow-y: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      &.close {
        width: 0;
      }

      >.item {
        text-align: center;
        font-size: 14rem;
        line-height: 18rem;
        padding: 13rem 8rem 20rem;
        font-weight: 500;

        &.con {
          border-radius: 10rem 0rem 0rem 10rem;
          margin-left: 3rem;
          font-weight: 600;
          background: #fff;
          color: #642e8e;
        }
      }
    }

    .products_list {
      flex: 1;
      overflow-y: scroll;
      box-sizing: border-box;

      :deep(.productsList) {
        padding: 0rem 10rem 0rem;

        >.item {
          width: 48%;
        }

        .subTitle {
          overflow: hidden;
          /* 溢出隐藏 */
          text-overflow: ellipsis;
          /* 使用省略号表示溢出部分 */
          display: -webkit-box;
          -webkit-line-clamp: 3;
          /* 指定要显示的行数 */
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
